/* Reset */
body, div, section, aside, nav, a, ul, li, article,footer,p, header, footer, hgroup, h1, h2, img {
margin:0;
padding:0;
}

body {
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	color: #94DBFF;
}

/* clearfixes */

@mixin boxShadow {
	box-shadow: 6px 6px 6px #000;
}

@mixin secondaryColor {
	background-color: #162B35;
}

@mixin clearfix{
  zoom:1;
  
  &:after{
    display:block; content:"";
    height:0; clear:both; }
	}

/* Layout Styles
----------------------------------------------------------*/
#wrapper {
    margin: 0 auto;
	width: 80%;
}

#main-header {
    background-color: #1e1e1e;
	opacity: 0.9;
    padding: 10px;
	border-radius:0 0 20px 20px;
	@include boxShadow;

    img {
        width: 120px;
        height: 126px;
        float: left;
		margin-left:10px;
    }

    h1, h2 {
        font-family: SketchFlow Print;
        color: #007ACC;
        margin-left: 20%;
		margin-top: 20px;
    }

	@include
    clearfix;
}

#container {
    margin-top: 30px;
    background-color: rgba(30, 30, 30, 0.9);
    @include boxShadow;

    aside {
        width: 11%;
        margin: 10px;
		margin-right: 0;
        @include secondaryColor;
        min-height: 430px;
        float: left;
		@include boxShadow;
    }

    #nested {
		margin: 10px;
        width: 77.5%;
        float: left;
    }

    #main-nav-right {
        width: 11%;
		margin-left: -35px;
		float: left;
		margin-top: 10px;
        
		@include boxShadow;

        ul {
            list-style: none;
            text-align: center;
            font-family: 'Segoe UI';
            font-size: 18px;

            li {
                display: block;
				border-top: 1px solid black;
				@include secondaryColor;

				&:first-child {
					border: none;
				}

                &:hover {
                    background-color: #007ACC;
                }

                a {
                    padding-top: 20%;
                    padding-bottom: 20%;
                    text-decoration: none;
					color: #94DBFF;
                    display: block;
                }
            }
        }
    }

	@include
    clearfix;
}

#wrapper > footer {
	@include boxShadow;
    font-family: SketchFlow Print;
    color: #007ACC;
	background-color: rgba(30, 30, 30, 0.9);
    font-size: 26px;
	text-align:center;	
	margin-top:10px;

    p {
		padding-top:10px;
		padding-bottom:10px;		
    }
}

/* Main Style
----------------------------------------------------------*/
#nested {
	section {
		font-family:'Segoe UI';
		font-size:18px;
		#map {
			float: left;
			width: 53%;
			height: 400px;
			@include boxShadow;
			border: 1px solid black;
		}

		#layer-info-date-container {
			width: 42%;
			float: left;
			margin-left: 10px;
			text-align:center;
			> div {
				margin-top: 10px;
				@include boxShadow;

				&:first-child {
					margin-top: 0;
				}
			}

			#layers, #information, {
				header {
					background-color: #162B35;
					padding:5px;
				}

				#layers-container, #info-container {
					background-color:#ece9e9;
					min-height:100px;
				}
			}
			@include
			clearfix;
		}
		#date {
			padding: 5px;
			display: inline-block;
			width: 53%;
			header {
				text-align: center;
			}
			#date-container {
			}
		}
		@include
		clearfix;
	}
}

/* Information Style
----------------------------------------------------------*/

#nested {
	#info {
		border: 1px solid black;
		@include boxShadow;
		width: 95%;
		padding: 5px;
		color: white;
		header {
			width: 95%;
		}
		section {
			width: 95%;
			margin-top: 5%;
			word-wrap: break-word;
		}
		footer {
			text-align: right;
			margin-right: 10%;
			width: 95%;
			box-shadow: none;
		}
		form {
			margin-top: 10px;
			input[type="submit"] {
				border: 1px solid black;
				background-color: #162B35;
				padding: 5px;
				&:hover {
					background-color: #94DBFF;
				}
			}
		}
	}
}



/* responsive
----------------------------------------------------------*/

